<template>
  <div class="chart-content-wrapper">
    <top-filter :title="reportName">
      <double-check-filter @confirmDoubleSelect="planAreaSelect" defaultText="统筹区" :filter="filter" type="planArea"></double-check-filter>
      <single-list-filter-without-cb :filter="filter" :type="'years'"
                                     @confirmSingleSelect="chooseYear">
      </single-list-filter-without-cb>
      <single-list-filter @confirmSingleSelect="hospLevelSelect" defaultText="医院等级" :filter="filter" type="hospLevel"></single-list-filter>
      <single-list-filter-without-cb :defaultText="'医疗类别'" :filter="filter" :type="'insuredType'" @confirmSingleSelect="confirmSingleSelect"></single-list-filter-without-cb>
    </top-filter>
    <div id="myChart8" class="chart-type1"  style="height:70%"></div>
    <Summarize :showSummarizeText="conclusion"></Summarize>
  </div>
</template>

<script>
  import SingleListFilter from '../../last/filter/single-list-filter.vue'
  import DoubleCheckFilter from '../../last/filter/double-check-filter.vue'
  import TopFilter from '../../last/filter/top-filter1.vue'
  import Summarize from '../../last/summarize/summarize.vue'
  import SingleListFilterWithoutCb from '../../last/filter/single-list-filter-without-checkbox'
  import {getChartItem8} from "../../../api/api";

  export default {
    name: 'chart8',
    components:{
      SingleListFilter,
      DoubleCheckFilter,
      TopFilter,
      Summarize,
      SingleListFilterWithoutCb
    },
    props:['isChange'],
    data () {
      return {
        filter: JSON.parse(JSON.stringify(require('../../cnst/allInputs.json').data)),
        conclusion:'',
        areaCode:null,
        hospLevel:null,
        medicalCategory:null,
        queryYear:'2018',
       /* reportName:'医保目录外费用比例比较分析TOP6'*/
        reportName:'医保目录外费用'
      }
    },
    mounted(){
      // 基于准备好的dom，初始化echarts实例
      this.myChart = this.$echarts.init(document.getElementById('myChart8') ,null, {renderer: 'canvas'})
      this.myChart.showLoading();
      this.getData();

    },
    watch:{
      isChange(){
        setTimeout(()=>{
          this.myChart.resize();
        },101)
      }
    },
    methods:{
      getData(){
        getChartItem8('report/medCatalogOutCostRateCompareAnalysis',this.areaCode, this.hospLevel, this.medicalCategory, this.queryYear).then(response=>{
          let json = response.data;
          if(response.code===0){
            this.myChart.hideLoading();
            /* this.reportName = json.reportName;*/
            this.drawLine(json)
          }
        })
      },
      avg(arry){
        let sum=0;
        let len=arry.length;
        for(let i=0;i<len;i++){
          sum+=arry[i];
        }
        let d = parseInt((sum/len)*100)/100;
        return d;
      },
      chooseYear(year){
        //年份选择
        this.queryYear = year;
        this.getData();
      },
      planAreaSelect(filter){
        //统筹区
        this.areaCode = filte.jion(',')
        this.getData();
      },
      hospLevelSelect(filter){
        //医院级别
        this.hospLevel = filter.join(',')
        this.getData();
      },
      confirmSingleSelect(filter){
        //医疗类别
        this.medicalCategory = filter;
        this.getData();
      },
      drawLine(json){
        let avg = json.avgGrowthRate;
        this.conclusion = json.reportConclusion;
        // 绘制图表
        this.myChart.setOption({
          // Make gradient line here
          grid:[//此参数可在一个dom中划分多个图表 可设置不同图表的位置
            {
              width: '20%',
              left:'70%',
              height:'78%',
              top:'17%',
              tooltip: {
                formatter: "{b}</br>{c}%" //给当前坐标系添加弹窗
              }
            },
            {
              width: '45%',
              left:'20%',
              height:'80%',
              top:'14%',
              tooltip: {
                formatter: "{b}</br>{c}%" //给当前坐标系添加弹窗
              }
            }
          ],
          legend: {
            left:'10%',
            top: '3%',
            icon:'rect',
            itemWidth: 30,
            itemHeight: 10,
            itemGap: 10,
            data:[`${this.queryYear}年`,`${this.queryYear-1}年`],
            textStyle:{
              color:'#fff'
            }
          },
          tooltip:{
           /* trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
              type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            },*/
            /*formatter :"{b}</br>{a0}：{c0}%</br>{a1}：{c1}%"*/
          },
          xAxis: [{
            type:'value',
            splitLine: {
              show: false
            },
            position:'top',
            splitNumber:2,
            axisLine:{
              show:false
            },
            axisLabel : {
              formatter: '{value}',
              textStyle: {
                color: '#fff'
              }
            },
            axisTick:{
              show:false
            }

          }, {
            type:'value',
            splitLine: {show: false},
            gridIndex: 1,
            axisLine:{
              show:false
            },
            axisLabel : {
              show:false,
              formatter: '{value}',
              textStyle: {
                color: '#fff'
              }
            },
            axisTick:{
              show:false
            }
          }],
          yAxis: [{
            data: json.medInstitutionList,
            splitLine: {
              show: false
            },
            axisLine:{
              show:true,//显示y轴坐标线并设置为虚线
              lineStyle:{
                lineStyle:{
                  type:'solid',
                  color:'#2a4565'
                }
              }
            },
            axisTick:{
              show:false //不显示y轴坐标的刻度
            },
            axisLabel:{
              show:false //不显示y轴坐标数值
            }
          }, {
            data: json.medInstitutionList,
            gridIndex: 1,
            axisLine:{ //y轴的横线是否显示
              show:true,
              lineStyle:{
                color:'#2a4565'
              }
            },
            axisLabel : {
              formatter: '{value}',
              textStyle: {
                color: '#fff'
              }
            },
            axisTick:{ //y轴的刻度短竖线是否显示
              show:false
            }
          }],
          visualMap: [{
            show: true,
            dimension: 0,
            seriesIndex: 0,
            left: '40%',
            top: '3%',
            itemWidth:10,
            itemHeight:10,
            orient:"horizontal",
            textStyle:{
              color:'#fff'
            },
            pieces:[
              {
                max: avg,
                color: '#67ffdb',
                symbol:'circle',
                label: '增长率（低于平均值）',
              }, {
                min: avg,
                color: '#2b9ff6',
                symbol:'circle',
                label: '增长率（高于平均值）'
              }
            ],
          }],
          series: [{
            type: 'scatter',
            showSymbol: true,
            data: json.institutionGrowthRateList,
            symbolSize: 10,
            label:{
              show:true,
              position:'right',
              formatter:'{c}%',
              color:'#fff'
            },
            markLine:{
              label:{
                position: 'start',
                formatter: '平均增长率{c}%',
                color:'#fff'
              },
              symbol:'none',
              data : [
                {
                  xAxis:avg,
                  name: '平均增长率'
                }
              ],
              lineStyle: {
                color:'#ff6a93'
              }
            }
          }, {
            type: 'bar',
            showSymbol: false,
            name: `${this.queryYear}年`,
            itemStyle:{
              color:'#ff6a93'
            },
            data: json.currYearMedOutFeeRateList,
            label:{
              show:true,
              position:'right',
              formatter:'{c}%',
              color:'#fff'
            },
            markLine:{
              symbol:'none',
              label:{
                position: 'start',
                formatter: '平均{c}%',
                color:'#fff'
              },
              data:[
                {
                  name: '平均',
                  xAxis: json.avgFeeRate
                }
              ]
            },
            barWidth: '40%',
            xAxisIndex: 1,
            yAxisIndex: 1
          },{
            type: 'bar',
            name:`${this.queryYear-1}年`,//此值与legend图例对应
            itemStyle:{
              color:'#ffd66a'
            },
            label:{
              show:true,
              position:'right',
              formatter:'{c}%',
              color:'#fff'
            },
            markLine:{
              symbol:'none',
              lineStyle:{
                color:'#55cdb7'
              },
              label:{
                position: 'end',
                formatter: '达标{c}%',
                color:'#fff'
              },
              data:[
                {
                  name:'达标',
                  xAxis:json.standardRate
                }
              ],
            },
            showSymbol: false,
            data: json.lastYearMedOutFeeRateList,
            barWidth: '40%',
            xAxisIndex: 1,
            yAxisIndex: 1
          }]
        });
      },
      drawLineTest(){
        this.myChart.hideLoading();
        let rateList = [1,2,3,4,5,-1.8];
        let max = Math.max.apply(null, rateList);
        let min = Math.min.apply(null, rateList);
        let avg = this.avg(rateList);
        // let avg = this.avg(json.institutionGrowthRateList)
        // 绘制图表
        this.myChart.setOption({
          // Make gradient line here
          grid:[//此参数可在一个dom中划分多个图表 可设置不同图表的位置
            {
              width: '20%',
              left:'70%',
              height:'78%',
              top:'17%',
              tooltip: {
                formatter: "{b}</br>{c}%" //给当前坐标系添加弹窗
              }
            },
            {
              width: '45%',
              left:'20%',
              height:'80%',
              top:'14%',
              tooltip: {
                formatter: "{b}</br>{c}%" //给当前坐标系添加弹窗
              }
            }
          ],
          legend: {
            left:'10%',
            top: '3%',
            icon:'rect',
            itemWidth: 30,
            itemHeight: 10,
            itemGap: 10,
            data:[`${this.queryYear}年`,`${this.queryYear-1}年`],
            textStyle:{
              color:'#fff'
            }
          },
          tooltip: {
          },
          xAxis: [{
            type:'value',
            splitLine: {
              show: false
            },
            position:'top',
            splitNumber:2,
            axisLine:{
              show:false
            },
            axisLabel : {
              formatter: '{value}',
              textStyle: {
                color: '#fff'
              }
            },
            axisTick:{
              show:false
            }

          }, {
            type:'value',
            splitLine: {show: false},
            gridIndex: 1,
            axisLabel : {
              show:false,
              formatter: '{value}',
              textStyle: {
                color: '#fff'
              }
            },
            axisLine:{
              show:false
            },
            axisTick:{
              show:false
            }
          }],
          yAxis: [{
            data: ['医院1','医院1','医院1','医院1','医院1','医院1'],
            splitLine: {
              show: false
            },
            axisLine:{
              show:true,//显示y轴坐标线并设置为虚线
              lineStyle:{
                type:'solid',
                color:'#2a4565'
              }
            },
            axisTick:{
              show:false //不显示y轴坐标的刻度
            },
            axisLabel:{
              show:false //不显示y轴坐标数值
            },
          }, {
            data: ['医院2','医院2','医院1','医院1','医院1','医院1'],
            gridIndex: 1,
            axisLabel : {
              formatter: '{value}',
              textStyle: {
                color: '#fff'
              }
            },
            axisLine:{ //y轴的横线是否显示
              show:true,
              lineStyle:{
                color:'#2a4565'
              }
            },
            axisTick:{ //y轴的刻度短竖线是否显示
              show:false
            }
          }],
          visualMap: [{
            show: true,
            dimension: 0,
            seriesIndex: 0,
            left: '40%',
            top: '3%',
            itemWidth:10,
            itemHeight:10,
            orient:"horizontal",
            textStyle:{
              color:'#fff'
            },
            pieces:[
              {
                max:avg,
                color: '#67ffdb',
                symbol:'circle',
                label: '增长率（低于平均值）',
              }, {
                min: avg,
                color: '#2b9ff6',
                symbol:'circle',
                label: '增长率（高于平均值）',
              }
            ],
          }],
          series: [{
            type: 'scatter',
            showSymbol: true,
            data: [1,2,3,4,5,-1.8],
            symbolSize: 10,
            label:{
              show:true,
              position:'right',
              formatter:'{c}%',
              color:'#fff'
            },
            markLine:{
              label:{
                position: 'start',
                formatter: '平均增长率{c}%'
              },
              symbol: 'none',
              data : [
                {
                  type : 'average',
                  name: '平均增长率',
                }
              ],
              lineStyle: {
                color:'#ff6a93'
              }
            }
          }, {
            type: 'bar',
            showSymbol: false,
            name: `${this.queryYear}年`,
            itemStyle:{
              color:'#ff6a93'
            },
            data: [80,23,28,45,23,50],
            label:{
              show:true,
              position:'right',
              formatter:'{c}%',
              color:'#fff'
            },
            markLine:{
              symbol:'none',
              lineStyle:{

              },
              label:{
                position: 'start',
                formatter: '平均{c}%'
              },
              data:[
                {
                  name: '平均',
                  xAxis: 55
                }
              ],
            },
            barWidth: '40%',
            xAxisIndex: 1,
            yAxisIndex: 1
          },{
            type: 'bar',
            name:`${this.queryYear-1}年`,//此值与legend图例对应
            itemStyle:{
              color:'#ffd66a'
            },
            label:{
              show:true,
              position:'right',
              formatter:'{c}%',
              color:'#fff'
            },
            markLine:{
              symbol:'none',
              lineStyle:{
                color:'#55cdb7'
              },
              label:{
                position: 'end',
                formatter: '达标{c}%'
              },
              data:[
                {
                  name:'达标',
                  xAxis:45
                }
              ],
            },
            showSymbol: false,
            data: [20,30,40,50,60,20],
            barWidth: '40%',
            xAxisIndex: 1,
            yAxisIndex: 1
          }],
        })
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
